<?php echo $this->Html->css('ui.jqgrid') ?>
<?php echo $this->Javascript->link('jquery/i18n/grid.locale-pt-br.js'); ?>
<?php echo $this->Javascript->link('jquery/jquery.jqGrid.min.js'); ?>

<div class="ui-amp-container">
  <h2><?php echo __('Users')?>
    <?php echo $actions->buildIndexLinks()?></h2>
  
  <table id="users-table"></table>
  <div id="users-pager"></div>
</div>

<script type="text/javascript">
$(document).ready(function() {
  $.extend($.jgrid.defaults, {
    mtype: 'POST',
    autowidth: true,
    //height: '100%',
    jsonReader: { repeatitems: false, id: 'id' },
    sortname: 'id',
    viewrecords: true
  });
  
  $("#users-table").jqGrid({
    url: "<?php echo $this->response->makeUrl("/grid/data.json") ?>",
    datatype: "json",
    colNames: ["Id", "Username"],
    colModel: [{name:"id"}, {name:"username"}],
    pager: "#users-pager",
    multiselect: true
  }).navGrid("#users-pager", {
    edit:false,
    add:false,
    del:false,
    search:false
  }).navButtonAdd("#users-pager", {
     caption:"Edit", 
     buttonicon:"ui-icon-add", 
     onClickButton: function() {
       var grid = $("#" + this.id);
       alert(grid.jqGrid("getGridParam", "selarrrow"));
     }
  }).navButtonAdd("#users-pager", {
     caption:"Delete", 
     buttonicon:"ui-icon-del", 
     onClickButton: function() {
       var grid = $("#" + this.id);
       alert(grid.jqGrid("getGridParam","selarrrow"));
     }
  });
});
</script>